<template>
  <view>
    <!-- home页面 -->
        <!-- 轮播图区域模块 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000" :circular="true">
          <swiper-item>
            <view class="swiper-item"></view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item"></view>
          </swiper-item>
        </swiper>
        <!-- 9宫格区域 -->
        <view class="grid-list">
          <!-- <view class="grid-item">
            <image src="https://xmx-1306676270.cos.ap-beijing.myqcloud.com/%E9%A6%96%E9%A1%B5_08.png"></image>
            <text>专线物流</text>
          </view> -->
          <view class="grid-item" v-for="(item, i) in gridItems" :key="i">
            <image :src="item.imgsrc"></image>
            <text>{{item.name}}</text>
          </view>
          
        </view>  <!--  9宫格区域 -->

  </view>
</template>

<script>
  export default {
    data() {
      return {
        gridItems: [{
          name:'专线物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/1.png'},
          {name:'快速物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/2.png'},
          {name:'定制物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/3.png'},
          {name:'定制物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/4.png'},
          {name:'定制物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/5.png'},
          {name:'定制物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/6.png'},
          {name:'定制物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/1.png'},
          {name:'定制物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/8.png'},
          {name:'定制物流',
          imgsrc:'https://xmx-1306676270.cos.ap-beijing.myqcloud.com/9.png'},
        ]
      };
    }
  }
</script>

<style lang="scss">
swiper {
  height:350rpx;
  margin-bottom: 20rpx;
}
.swiper-item {
  width: 100%;
  height: 100%;
  background: url(https://xmx-1306676270.cos.ap-beijing.myqcloud.com/banner2.png);
  background-size: cover;
}
.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #eeeeee;
}
.grid-item {
  width: 33.333%;
  height: 210rpx;
  display:flex;
  flex-direction: column;
  justify-content: center;

  align-items: center;
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
}
.grid-item image {
  width: 88rpx;
  height: 55rpx;
}
.grid-item text {
  margin-top: 24rpx;
}
</style>
